<template>
  <!-- 图片消息 -->
  <div class="chat-bubble" :class="{'self': chat.isSelf}">
    <!-- 头像 -->
    <div class="head-url"  v-hammer:tap="(ev)=>onHeadClicked(ev)"  v-hammer:press="(ev)=>onHeadPressed(ev)">
      <img :src="chat.fromAccountHeadurl ? chat.fromAccountHeadurl : require('@/assets/icons/head.svg')" alt />
    </div>

    <!-- 聊天内容 -->
    <div class="content">
      <div class="user-info" v-if="!chat.isSelf">
        <div class="user-level" :class="`user-level-${chat.role}`">
          {{ chat.role | Role}}
        </div>
        <div class="username">
          {{ chat.fromAccountNick }}
        </div>
      </div>

      <div class="bubble image-wrapper" @click="onImageClicked">
        <img :src="chat.smallImage" alt="" class="bubble-photo"/>
      </div>

    </div>

  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
declare const $Vue: Vue;


@Component
export default class MessagePhoto extends Vue {

  @Prop({})
  chat: any;

  protected mounted() {

  }

  private onImageClicked() {
    $Vue.$emit('onImagePreview',this.chat.oriImage);
  }

  private onHeadClicked() {
    $Vue.$emit('onHeadClicked', {
      data: this.chat,
    })
  }

  private onHeadPressed() {
    $Vue.$emit('onHeadPressed', {
      data: this.chat,
    });
  }
}
</script>

<style lang="stylus" scoped>
.bubble-photo
  max-height 100% 
  max-width 100%

.image-wrapper 
  text-align center!important
  height 160px
  max-height 160px
  max-width 100%

</style>

